<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/ajax-day01/js/vue-2.6.12.js"></script>
    <script type="text/javascript" src="/ajax-day01/js/myajax.js"></script>
</head>
<body>
    <div id="app">
        <book-table></book-table>
    </div>
    <template id="book-table">
        <div>
        <table border="1">
            <thead>
            <tr>
                <th>编号</th>
                <th>图书名</th>
                <th>作者</th>
                <th>价格</th>
                <th>库存</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="b in books" :key="b.bookId">
                <td>{{b.bookId}}</td>
                <td>{{b.bookName}}</td>
                <td>{{b.author}}</td>
                <td>{{b.price}}</td>
                <td>{{b.stock}}</td>
                <td>
                    <button>删除</button>
                    <button>更新</button>
                </td>
            </tr>
            </tbody>
        </table>
        <p>
            <a href="" v-for="page in pages" :key="page" @click.prevent="handleAClick(page)"><button style="margin:0 6px">{{page}}</button></a>
        </p>
        </div>
    </template>
    <script>
        const bookTable = {
            template:"#book-table",
            data(){
                return{
                    books:[],
                    pages:[]
                }
            },
            methods:{
                handleAClick(page){
                    let url = "/ajax-day01/book/show";
                    let data = `pageNum=${page}&pageSize=5`;
                    let type = "get";
                    myAjax(url, data, type, (result) => {
                        //result格式: (属性1=值1&属性2=值2...),(属性1=值1&属性2=值2...),...:pages
                        let ss = result.split(":");
                        let pages = Number.parseInt(ss[1]);
                        let booksStr = ss[0];

                        this.books=[];
                        this.pages=[];

                        let bookObjs = booksStr.split(",");//["属性1=值1&属性2=值2","属性1=值1&属性2=值2","属性1=值1&属性2=值2",...]
                        for(let i = 0; i < bookObjs.length; i++){
                            //bookObjs[i] //属性1=值1&属性2=值2...
                            let bookProps =  bookObjs[i].split("&");//["属性1=值1","属性2=值2",...]
                            let book = {};
                            for(let j = 0; j < bookProps.length; j++){
                                let prop =  bookProps[j].split("=");//prop[0] 属性名    prop[1] 属性值
                                book[prop[0]] = prop[1];//book[属性名] = 属性值
                            }
                            this.books.push(book);
                        }

                        for(let i = 1; i <= pages; i++){
                            this.pages.push(i);
                        }

                    })
                }
            },
            created: function () {
                //发起ajax请求,为books和pages赋值
                let url = "/ajax-day01/book/show";
                let data = "pageNum=1&pageSize=5";
                let type = "get";
                myAjax(url, data, type, (result) => {
                    //result格式: (属性1=值1&属性2=值2...),(属性1=值1&属性2=值2...),...:pages
                    let ss = result.split(":");
                    let pages = Number.parseInt(ss[1]);
                    let booksStr = ss[0];

                    let bookObjs = booksStr.split(",");//["属性1=值1&属性2=值2","属性1=值1&属性2=值2","属性1=值1&属性2=值2",...]
                    for(let i = 0; i < bookObjs.length; i++){
                        //bookObjs[i] //属性1=值1&属性2=值2...
                        let bookProps =  bookObjs[i].split("&");//["属性1=值1","属性2=值2",...]
                        let book = {};
                        for(let j = 0; j < bookProps.length; j++){
                            let prop =  bookProps[j].split("=");//prop[0] 属性名    prop[1] 属性值
                            book[prop[0]] = prop[1];//book[属性名] = 属性值
                        }
                        this.books.push(book);
                    }

                    for(let i = 1; i <= pages; i++){
                        this.pages.push(i);
                    }

                })
            }
        }
        const vm = new Vue({
            el:"#app",
            components:{bookTable}
        })
    </script>
</body>
</html>